<template>
  <view>
    <view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
    <view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}">
      <view class="addr"></view>
      <view class="input-box">

      </view>

    </view>
    <!-- 占位 -->
    <view v-if="showHeader" class="place"></view>
    <!-- 用户信息 -->
    <view class="user">
      <!-- 头像 -->
      <view class="left">
        <image :src="user.face" @tap="toSetting"></image>
      </view>
      <!-- 昵称,个性签名 -->
      <view class="right">
        <view class="username" @tap="toLogin">{{ user.username }}</view>
        <view class="signature">{{ user.phoneNumber }}</view>
      </view>
    </view>
    <!-- VIP banner -->
    <view class="VIP">
      <view class="img">
        <image src="http://120.55.49.138/ShopMall/static/img/VIP.png"></image>
      </view>
      <view class="title">VIP会员</view>
      <view class="tis">会员特权</view>
    </view>
    <!-- 订单-余额 -->
    <view class="order">
      <!-- 订单类型 -->
      <view class="list">
        <view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
          <view class="img">
            <view class="icon" :class="row.icon"></view>
          </view>
          <view class="text">{{ row.text }}</view>
        </view>
      </view>

    </view>
    <!-- 工具栏 -->
    <view class="toolbar">
      <view class="title">我的工具栏</view>
      <view class="list">
        <view class="box" v-for="(row,index) in mytoolbarList" :key="index" @tap="toPage(row.url)">
          <view class="img">
            <image :src="row.img"></image>
          </view>
          <view class="text">{{ row.text }}</view>
        </view>
      </view>
    </view>
    <!-- 占位 -->
    <view class="place-bottom"></view>
  </view>
</template>
<script>

export default {
  data() {
    return {
      isfirst: true,
      headerPosition: "fixed",
      headerTop: null,
      statusTop: null,
      showHeader: true,
      //个人信息,
      user: {
        username: '游客1002',
        face: '',
        signature: '',
        integral: 0,
        balance: 0,
        envelope: 0
      },
      // 订单类型
      //订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
      orderList: [
        {text: '待付款', icon: "fukuan"},
        {text: '待发货', icon: "fahuo"},
        {text: '待收货', icon: "shouhuo"},
        {text: '已完成', icon: "pingjia"},
        // {text:'已关闭',icon:"guanbi"},
        // {text:'已失效',icon:"shixiao"}
      ],
      // 工具栏列表
      mytoolbarList: [
        //{url:'../../user/keep/keep',text:'我的收藏',img:'http://120.55.49.138/ShopMall/static/img/user/point.png'},
        //{url:'../../user/history/history',text:'我的足迹',img:'http://120.55.49.138/ShopMall/static/img/user/mingxi.png'},
        //{url:'../../user/coupon/coupon',text:'优惠券',img:'http://120.55.49.138/ShopMall/static/img/user/quan.png'},

        {url: '../../user/free/free', text: '免费商品', img: '/static/img/my/free.png'},
        {url: '../../car/index', text: '我的车库', img: '/static/img/my/car.png'},

        {url: '../../user/address/address', text: '收货地址', img: '/static/img/my/address.png'},
        //{url:'',text:'账户安全',img:'http://120.55.49.138/ShopMall/static/img/user/security.png'},
        //{url:'',text:'银行卡',img:'http://120.55.49.138/ShopMall/static/img/user/bank.png'},
        //{url:'',text:'抽奖',img:'http://120.55.49.138/ShopMall/static/img/user/choujiang.png'},
        // {text:'客服',img:'http://120.55.49.138/ShopMall/static/img/user/kefu.png'},
        // {text:'签到',img:'http://120.55.49.138/ShopMall/static/img/user/mingxi.png'}

      ]
    }
  },
  //下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
  onPullDownRefresh() {
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
    this.headerTop = e.scrollTop >= 0 ? null : 0;
    this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
  },
  onLoad() {
    this.statusHeight = 0;
    // #ifdef APP-PLUS
    this.showHeader = false;
    this.statusHeight = plus.navigator.getStatusbarHeight();
    // #endif
  },
  onReady() {
    //此处，演示,每次页面初次渲染都把登录状态重置
    uni.setStorage({
      key: 'UserInfo',
      data: false,
      success: function () {
      },
      fail: function (e) {
      }
    });
  },
  onShow() {


    uni.getStorage({
      key: 'UserInfo',
      success: (res) => {
        console.log('用户信息：', res);
        var username = uni.getStorageSync('username');
        var face = uni.getStorageSync('face');
        var phoneNumber = uni.getStorageSync('phoneNumber');

        console.log('username:' + username);
        console.log('face:' + face);
        this.user.face = face;
        this.user.username = username;
        this.user.phoneNumber = phoneNumber
        if (!res.data) {
          var sessionid = uni.getStorageSync("sessionid", sessionid);
          console.log('sessionid:' + sessionid);
          var hearder = uni.getStorageSync("hearder", hearder);
          console.log('hearder:' + hearder);

          if (sessionid == null || hearder == null) {

            this.toLogin();
          }
          return;
        }
        this.user = res.data;
      },
      fail: (e) => {
        this.toLogin();
      }
    });
  },
  methods: {
    //消息列表
    toMsg() {
      uni.navigateTo({
        url: '../../msg/msg'
      })
    },
    toOrderList(index) {
      uni.setStorageSync('tbIndex', index);
      uni.navigateTo({url: '../../user/order_list/order_list?tbIndex=' + index})
    },
    toSetting() {
      // uni.navigateTo({
      // 	url:'../../user/setting/setting'
      // })
    }, toHistory() {
      uni.navigateTo({
        url: '../../user/history/history'
      })
    },
    toMyQR() {
      uni.navigateTo({
        url: '../../user/myQR/myQR'
      })
    },
    toLogin() {
      uni.showToast({title: '请登录', icon: "none"});
      uni.navigateTo({
        url: '../../login/login'
      })
      this.isfirst = false;
    },
    isLogin() {
      //实际应用中,用户登录状态应该用token等方法去维持登录状态.
      const value = uni.getStorageSync('UserInfo');
      if (value) {
        return true;
      }
      return false
    },
    toDeposit() {
      uni.navigateTo({
        url: '../../user/deposit/deposit'
      })
    },
    toPage(url) {
      if (!url) {
        uni.showToast({title: '模板未包含此页面', icon: "none"});
        return;
      }
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>
<style lang="scss">
page {
  position: relative;
  background-color: #fff;
}

.status {
  width: 100%;
  height: 0;
  position: fixed;
  z-index: 10;
  background-color: #f06c7a;
  top: 0;
  /*  #ifdef  APP-PLUS  */
  height: var(--status-bar-height); //覆盖样式
  /*  #endif  */

}

.header {
  width: 92%;
  padding: 0 4%;
  height: 100upx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 10;
  background-color: #f06c7a;
  /*  #ifdef  APP-PLUS  */
  top: var(--status-bar-height);
  /*  #endif  */
  .icon-btn {
    width: 120upx;
    height: 60upx;
    flex-shrink: 0;
    display: flex;

    .icon {
      color: #fff;
      width: 60upx;
      height: 60upx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: 42upx;
    }
  }
}

.place {
  background-color: #f06c7a;
  height: 100upx;
  /*  #ifdef  APP-PLUS  */
  margin-top: var(--status-bar-height);
  /*  #endif  */
}

.place-bottom {
  height: 300upx;
}

.user {
  width: 92%;
  padding: 0 4%;
  display: flex;
  align-items: center;
  // position: relative;
  background-color: #f06c7a;
  padding-bottom: 120upx;

  .left {
    width: 20vw;
    height: 20vw;
    flex-shrink: 0;
    margin-right: 20upx;
    border: solid 1upx #fff;
    border-radius: 100%;

    image {
      width: 20vw;
      height: 20vw;
      border-radius: 100%;
    }

  }

  .right {
    width: 100%;

    .username {
      font-size: 36upx;
      color: #fff;
    }

    .signature {
      color: #eee;
      font-size: 28upx;
    }
  }

  .erweima {
    flex-shrink: 0;
    width: 10vw;
    height: 10vw;
    margin-left: 5vw;
    border-radius: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left, #fbbb37 0%, #fcf0d0 105%);

    .icon {
      color: #7b6335;
      font-size: 42upx;
    }
  }
}

.order {
  width: 84%;
  margin: 30upx 4% 30upx 4%;
  padding: 30upx 4% 20upx 4%;
  background-color: #fff;
  box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
  border-radius: 15upx;

  .list {
    display: flex;
    border-bottom: solid 1upx #17e6a1;
    padding-bottom: 10upx;

    .box {
      width: 20%;

      .img {
        width: 100%;
        display: flex;
        justify-content: center;

        .icon {
          font-size: 50upx;
          color: #464646;
        }
      }

      .text {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 28upx;
        color: #3d3d3d;
      }
    }
  }

  .balance-info {
    display: flex;
    padding: 10upx 0;

    .left {
      width: 75%;
      display: flex;

      .box {
        width: 50%;
        font-size: 28upx;

        .num {
          width: 100%;
          height: 50upx;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          color: #f9a453;
        }

        .text {
          width: 100%;
          display: flex;
          justify-content: center;
          color: #3d3d3d;
          font-size: 28upx;
        }
      }
    }

    .right {
      border-left: solid 1upx #17e6a1;
      width: 25%;

      .box {

        .img {
          width: 100%;
          height: 50upx;
          display: flex;
          justify-content: center;
          align-items: flex-end;

          .icon {
            font-size: 45upx;
            color: #e78901;
          }
        }

        .text {
          width: 100%;
          display: flex;
          justify-content: center;
          font-size: 28upx;
          color: #3d3d3d;
        }
      }
    }
  }
}

.VIP {
  width: 84%;
  margin: -65upx auto 20upx auto;
  padding: 30upx 4%;
  background: linear-gradient(to left, #dea96d 0%, #f6d59b 100%);
  box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.2);
  border-radius: 15upx;
  display: flex;
  align-items: center;

  .img {
    flex-shrink: 0;
    width: 60upx;
    height: 60upx;

    image {
      width: 60upx;
      height: 60upx;
    }
  }

  .title {
    width: 100%;
    color: #796335;
    font-size: 30upx;
  }

  .tis {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    color: #fcf0d0;
    font-size: 26upx;
  }
}

.toolbar {
  width: 92%;
  margin: 0 4% 0 4%;
  padding: 0 0 20upx 0;
  background-color: #fff;
  box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
  border-radius: 15upx;

  .title {
    padding-top: 10upx;
    margin: 0 0 10upx 3%;
    font-size: 30upx;
    height: 80upx;
    display: flex;
    align-items: center;
  }

  .list {
    display: flex;
    flex-wrap: wrap;

    .box {
      width: 25%;
      margin-bottom: 30upx;

      .img {
        width: 23vw;
        height: 10.5vw;
        display: flex;
        justify-content: center;

        image {
          width: 9vw;
          height: 9vw;
        }
      }

      .text {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 26upx;
        color: #3d3d3d;
      }
    }
  }
}
</style>
